<template>
	<view class="container" @click="onClickCard">
		<view class="row-class">
			<text style="color: rgba(80, 80, 80, 1);font-size: 14px;">川A8888 - 大众 速腾</text>
		</view>
		
		<template v-if="data.type == 1">
			<view class="row-class">
				<text class="content-text">出发时间：2020年3月29日 9:00</text>
			</view>
			<view class="row-class">
				<text class="content-text">返回时间：2020年3月31日 18:00</text>
			</view>
			<view class="row-class">
				<text class="content-text">乘车人：张三 18988889999</text>
			</view>
			<view class="row-class">
				<text class="content-text">乘客数：3</text>
			</view>
			<view class="row-class">
				<text class="content-text">出发地址：中国核动力研究设计院</text>
			</view>
			<view class="row-class">
				<text class="content-text">到达地址：中国电子科技集团第十研究所</text>
			</view>
		</template>
		
		<template v-if="data.type == 2">
			<view class="row-class">
				<text class="content-text">航班号：U1212</text>
			</view>
			<view class="row-class">
				<text class="content-text">乘车人：张三 18988889999</text>
			</view>
			<view class="row-class">
				<text class="content-text">乘客数：3</text>
			</view>
			<view class="row-class">
				<text class="content-text">到达地址：中国电子科技集团第十研究所</text>
			</view>
		</template>
		
		<template v-if="!data.type">
			<view class="row-class">
				<text class="content-text">航班号：U1212</text>
			</view>
			<view class="row-class">
				<text class="content-text">乘车人：张三 18988889999</text>
			</view>
			<view class="row-class">
				<text class="content-text">乘客数：3</text>
			</view>
			<view class="row-class">
				<text class="content-text">出发地址：中国核动力研究设计院</text>
			</view>
			<view class="row-class">
				<text class="content-text">到达地址：中国电子科技集团第十研究所</text>
			</view>
		</template>
		
		<view class="split"></view>
		
		<view style="text-align: right;">
			<van-button :color="primaryColor" size="small" @click="onApply">开始行程</van-button>
		</view>
		
		<view class="type-class">
			<van-tag :color="primaryColor" size="medium" plain>预约</van-tag>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			data: Object
		},
		data() {
			return {
				primaryColor: getApp().globalData.primaryColor
			};
		},
		methods:{
			onClickCard(){
				this.$emit('click', this.data)
			}
		},
		mounted() {
			
		}
	}
</script>

<style lang="scss" scoped>
.container{
	margin: 10px 15px;
	border: 1px solid $uni-color-primary;
	border-radius: 6px;
	padding: 10px;
	background-color: #fff;
	position: relative;
	.row-class{
		margin: 0px;
	}
	.content-text{
		font-size: 12px;
		color: rgba(153, 153, 153, 1);
	}
	.type-class{
		position: absolute;
		top: 10px;
		right: 10px;
	}
	.split{
		border: 1px solid $uni-border-color;
		margin: 5px 0;
	}
}
</style>
